<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Callbacks Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 创建一个全局的 callbacks 对象，用于处理事件通知
            var eventCallbacks = $.Callbacks();

            // 观察者1：显示消息
            function showMessage(message) {
                console.log("Message received: " + message);
            }

            // 观察者2：将消息显示在页面上
            function showMessageOnPage(message) {
                $("#message-container").append("<p>" + message + "</p>");
            }

            // 将观察者添加到 callbacks 对象中
            eventCallbacks.add(showMessage);
            eventCallbacks.add(showMessageOnPage);

            // 发布事件，并通知所有观察者
            function publishEvent(message) {
                eventCallbacks.fire(message);
            }

            // 模拟发布事件
            $("#publish-button").click(function() {
                var message = $("#message-input").val();
                publishEvent(message);
            });
        });
    </script>
</head>
<body>
<input type="text" id="message-input" placeholder="Enter message">
<button id="publish-button">Publish</button>
<div id="message-container"></div>
</body>
</html>
